<!--
 * @Date: 2023-02-22 11:18:52
 * @LastEditTime: 2023-03-28 16:09:25
 * @FilePath: /hash-guess-game/src/views/drawCoin/drawCoin.vue
 * 介绍:提币
-->
<script lang="ts" setup>
import { apiDrawCoin } from "@@/api/module/drawCoin";
import { formatNumber } from "@@/utils/tools/tools";
import useBalanceStore, { CoinEnum } from "@@/store/useBalanceStore";
import toast from "@@/components/rework/toast";
import { showDialog } from "vant";
import drawCoinList from "./components/drawCoinList.vue";

const balanceStore = useBalanceStore();
const { coinEnum } = balanceStore;
/**当前币种id */
const currentCoinId = ref<Id>(coinEnum[0].id);
changeCoin(currentCoinId.value);
function changeCoin(e: Id) {
  const coin = balanceStore.getById(e);
  if (!coin?.withdraw_fee) balanceStore.getDrawCoinInfo(coin?.index);
  balanceStore.getGameBalance(coin?.index);
}
/**当前选中的coin */
const currentCoin = computed<CoinEnum | undefined>(() => {
  return balanceStore.getById(currentCoinId.value);
});
const formData = reactive({
  amount: "",
});
const { t } = useI18n();
/**当点击提交时 */
async function onSubmit() {
  const number = Number(formData.amount);
  if (isNaN(number) || !(number > 0))
    return toast.text(t("qin-shu-ru-zhen-que-de-jin-e"));
  toast.loading();
  const coin = await balanceStore.drawCoinBefore(
    balanceStore.getById(currentCoinId.value)?.index
  );
  toast.close();
  if (!coin)
    return toast.error(
      `${t("chu-shi-hua-shu-ju-shi-bai")},${t("qing-shua-xing-chong-shi")}`
    );
  if (!(number >= coin.min_withdraw!))
    return toast.text(`${t("bu-neng-xiao-yu")}:${coin.min_withdraw}`);
  if (!(number <= coin.gameBalance!)) return toast.text(t("yu-e-bu-zu"));
  showDialog({
    title: t("qing-que-ren"),
    message: `${t("ti-bi")}: ${number} ${coin.code}`,
  }).then(() => drawCoin(coin.id, number));
}
/**发起提币申请 */
function drawCoin(coin_id: Id, number: number) {
  apiDrawCoin({ coin_id, number });
}
</script>

<template>
  <div class="topUpCoin auto-mt">
    <h4>{{ $t("ti-bi") }}</h4>
    <Card class="auto-mt">
      <van-divider>
        {{ $t("yu-e") }}
      </van-divider>
      <h2>{{ formatNumber(currentCoin?.gameBalance, 4) }}</h2>
      <RadioBtnGroup @change="changeCoin" v-model="currentCoinId">
        <RadioBtn
          v-for="coin in coinEnum"
          :key="coin.id"
          :value="coin.id"
          class="bevel"
          style="--box-show-C: var(--C-O5)"
        >
          {{ coin.code }}
        </RadioBtn>
      </RadioBtnGroup>
      <VanField
        v-model="formData.amount"
        class="topUpCoin_input bevel"
        :placeholder="$t('ti-bi-shu-liang')"
      >
      </VanField>
      <div>
        {{ $t("shou-xu-fei") }} : {{ formatNumber(currentCoin?.withdraw_fee) }}%
      </div>
      <VanButton
        @click="onSubmit"
        class="bigBtn"
        color="var(--C-M1)"
        :size="'large'"
        round
        block
      >
        {{ $t("que-ren-ti-chu") }}
      </VanButton>
    </Card>
    <h4>{{ $t("ti-bi-ji-lu") }}</h4>
    <drawCoinList />
  </div>
</template>

<style lang="less" scoped>
h2 {
  text-align: center;
}
h4 {
  text-align: center;
  margin: var(--gap-lg) 0;
}
.RadioBtnGroup {
  margin: var(--gap-lg) 0;
}
.topUpCoin_input {
  background-color: #24252a;
  border-radius: 999rem;
}
.bigBtn {
  margin-top: var(--gap-lg);
}
</style>
